<script setup lang="ts">
import LEchart from '@/pagesReport/lime-echart/components/l-echart/l-echart.vue'
import { onMounted, ref, watch } from 'vue'
import * as echarts from 'echarts'
import type { coordinate } from '@/types/report'
import { addBreakpoint } from '@/utils/report'
import { useReportStore } from '@/stores'
//心率和呼吸
const heartdata = ref<coordinate[]>([])
const breathdata = ref<coordinate[]>([])
const heartChart = ref()
const reportStore = useReportStore()
const heartoption = ref({
  tooltip: {
    trigger: 'axis',
    confine: true,
    textStyle: {
      textShadow: 'none', // 去掉文字阴影
    },
  },
  legend: {
    bottom: '3%',
    data: [
      {
        name: '心率',
      },
      {
        name: '呼吸',
      },
    ],
  },
  xAxis: {
    type: 'time',
    boundaryGap: false,
    axisLabel: {
      rotate: 30,
    },
  },
  yAxis: {
    type: 'value',
    boundaryGap: [0, '100%'],
    min: 0,
    max: 100,
    splitNumber: 5,
  },
  grid: {
    top: '12%',
  },
  dataZoom: [
    {
      type: 'inside',
      start: 0,
      end: 100,
    },
  ],
  series: [
    /* 修改 lineStyle 中的颜色不会影响图例颜色，如果需要图例颜色和折线图颜色一致，需修改 itemStyle.color */
    {
      connectNulls: false,
      name: '心率',
      type: 'line',
      smooth: true,
      symbol: 'none',
      data: heartdata.value,
      itemStyle: {
        color: '#fd675b',
      },
      markLine: {
        silent: true,
        symbol: 'none',
        data: [
          {
            yAxis: 50,
            lineStyle: {
              color: '#fd675b',
            },
            label: {
              show: false,
            },
          },
          {
            yAxis: 90,
            lineStyle: {
              color: '#fd675b',
            },
            label: {
              show: false,
            },
          },
        ],
      },
    },
    {
      connectNulls: false,
      name: '呼吸',
      type: 'line',
      smooth: true,
      symbol: 'none',
      data: breathdata.value,
      itemStyle: {
        color: '#4be5b1',
      },
      markLine: {
        silent: true,
        symbol: 'none',
        data: [
          {
            yAxis: 12,
            lineStyle: {
              color: '#4be5b1',
            },
            label: {
              show: false,
            },
          },
          {
            yAxis: 20,
            lineStyle: {
              color: '#4be5b1',
            },
            label: {
              show: false,
            },
          },
        ],
      },
    },
  ],
})
onMounted(async () => {
  //初始化图表
  if (!reportStore.report) return
  addBreakpoint(reportStore.report!.heartInfo.pictureDataList, heartdata.value)
  addBreakpoint(reportStore.report!.breathInfo.pictureDataList, breathdata.value)
  const heartchart = await heartChart.value.init(echarts)
  heartchart.setOption(heartoption.value)
})
watch(
  () => reportStore.report,
  async (newReport) => {
    if (newReport) {
      //摧毁原来的图表重新创建
      heartChart.value.dispose()
      //addBreakpointht工具函数第二个参数必须是空数组
      heartdata.value = []
      breathdata.value = []
      //console.log('清空后的心率数据', heartdata.value)
      addBreakpoint(newReport.heartInfo.pictureDataList, heartdata.value)
      addBreakpoint(newReport.breathInfo.pictureDataList, breathdata.value)
      //给option赋值
      heartoption.value.series[0].data = heartdata.value
      heartoption.value.series[1].data = breathdata.value
      const heartchart = await heartChart.value.init(echarts)
      heartchart.setOption(heartoption.value)
    }
  },
)
</script>
<template>
  <view class="chart">
    <LEchart ref="heartChart"></LEchart>
  </view>
</template>
<style lang="scss"></style>
